<template>
  <div>
    <Chat
        :data="chatData"
        :showShade="false"
        :contactNickname="contactNickname"
        :ownerAvatarUrl="ownerAvatarUrl"
        :contactAvatarUrl="contactAvatarUrl"
    >
      <template #header>
        <NavBar :title="title" :is-vue-router="true"/>
      </template>
      <template #footer>
        <van-field border>
          <template #input>
            <input type="text" v-model = "inputMsg" id="input">
          </template>
          <template #button>
            <van-button type="primary" @click="sendMsg">发送</van-button>
          </template>
        </van-field>
      </template>

    </Chat>
  </div>
</template>

<script>
import Chat from '@/components/Chat.vue'
import NavBar from "@/components/NavBar";
import Match from "./Match";
export default {
  name: 'Chatpage',
  data () {
    return {
      inputMsg: '',
      title:"聊天",
      contactNickname:"张三",
      ownerAvatarUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1601718053526&di=e2149dafe682f469e877ed20e77f73a9&imgtype=0&src=http%3A%2F%2Fa4.att.hudong.com%2F22%2F59%2F19300001325156131228593878903.jpg',
      contactAvatarUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1601718053526&di=85c2566df917037e93f2fa7806f809a3&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F70%2F91%2F01300000261284122542917592865.jpg',
      chatData: [{
        direction: 2,
        id: 1,
        content: '你好!![呲牙]',
        ctime: new Date().toLocaleString()
      },
        {
          direction: 1,
          id: 2,
          content: '你也好。[害羞]',
          ctime: new Date().toLocaleString()
        },
        {
          direction: 2,
          id: 3,
          content: '这是我的简历头像：',
          ctime: new Date().toLocaleString()
        },
        {
          direction: 1,
          id: 5,
          content: '你开心就好。[微笑]',
          ctime: new Date().toLocaleString()
        }]
    }
  },
  components:{Match, NavBar, Chat},
  created(){
    this.initWidth();

  },
  methods:{
    sendMsg(){
      let msg = {room_id: this.$store.state.roomId,  msg: this.inputMsg, type: 'chat'}
      // console.debug("发送聊天信息msg前："+JSON.stringify(msg))
      this.$store.state.ws.send(JSON.stringify(msg))
      this.inputMsg = ''
      // console.debug("发送聊天信息msg后："+JSON.stringify(msg))
    },
    initWidth(){
      let ua = navigator.userAgent;
      let ipad = ua.match(/(iPad).*OS\s([\d_]+)/),
          isIphone =!ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/),
          isAndroid = ua.match(/(Android)\s+([\d.]+)/),
          isMobile = isIphone || isAndroid;
      if(!isMobile){
        this.width = 400
      }
    }
  }
}
</script>

<style scoped>
#input{
  width: 100%;
  height: 2.8rem;
}
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
}
</style>